<template>
  <div>
    <el-card class="Roles-container">
      <div class="search">
        <div class="search2"><el-input v-model="searchPassenger" placeholder="请输入用户手机号" /></div>
        <div><el-button type="primary" @click="searchP">搜索</el-button></div>
        <div class="searchReturn"><el-button type="warning" @click="homePage">返回全部</el-button></div>
      </div>
      <!-- 角色列表区域 -->
      <!-- stripe 隔行变色 -->
      <el-table
        :data="passengerList"
        border
        stripe
        @selection-change="handleSelectionChange"
      >
        <!-- 第一列 -->
        <el-table-column type="selection" width="55" />
        <!-- 第一列  索引列-->
        <el-table-column type="index" />
        <!-- 第二列 -->
        <el-table-column prop="phoneNum" label="手机号" />
        <!-- 第二列 -->
        <el-table-column prop="wxName" label="昵称" width="120" />
        <!-- 第二列 -->
        <el-table-column prop="sex" label="性别" width="70" />
        <!-- 第六列 -->
        <el-table-column prop="userMailbox" label="邮箱" />
        <!-- 第三列 -->
        <el-table-column prop="establishTime" label="创建时间" />
        <!-- 第四列 -->
        <el-table-column label="操作" width="480">
          <!-- 作用域 插槽 -->
          <template slot-scope="scope">
            <!--
              通过Scoped slot可以获取到 row, column,
              scope又并非是整个table，我们只是能通过scope.row获得当前的行数据，
            -->
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="showuser(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeuser(scope.row.userId)">删除</el-button>
            <el-button v-if="scope.row.userState == 1" size="mini" type="warning" icon="el-icon-setting" @click="lockUser(scope.row.userId,2)">锁定</el-button>
            <el-button v-if="scope.row.userState == 2" size="mini" type="info" icon="el-icon-key" @click="lockUser(scope.row.userId,1)">解锁</el-button>
            <el-button size="mini" type="success" icon="el-icon-s-release" @click="orderForm(scope.row.userId)">消费记录</el-button>
            <el-button size="mini" type="info" icon="el-icon-s-release" @click="complaint(scope.row.userId)">投诉记录</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <div class="removes">
        <div><el-pagination :current-page="querInfo.pagenum" :page-sizes="[3, 6, 9]" :page-size="querInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /></div>
        <div style="margin-right:18px"><el-button size="mini" type="danger" icon="el-icon-delete" @click="removes()">批量删除</el-button></div>
      </div>
    </el-card>
    <!-- 编辑抽屉 -->
    <el-drawer
      title="乘客个人信息"
      :visible.sync="editDrawer"
      :direction="direction"
      :before-close="handleClose"
      size="1000px"
    >
      <div class="register_frame">
        <el-form :label-position="labelPosition" label-width="90px" :model="editList">
          <!--头像上传 -->
          <el-form-item label="头像" prop="headdImg">
            <el-upload
              class="avatar-uploader"
              action="#"
              :http-request="uploadCardImg"
              :before-upload="imgUpload"
            >
              <img v-if="headdImg" :src="headdImg" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="editList.phoneNum" :disabled="true" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="editList.userPwd" type="password" />
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="editList.wxName" />
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="editList.sex" :disabled="true" />
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="editList.identityCard" :disabled="true" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="editList.userMailbox" />
          </el-form-item>
          <div class="editBtn">
            <div><el-button size="medium" type="primary" icon="el-icon-success" @click="SubmitEdit">提交编辑</el-button></div>
          </div>
        </el-form>
      </div>
    </el-drawer>
    <!-- 消费记录抽屉 -->
    <el-drawer
      title="乘客消费记录"
      :visible.sync="indentDrawer"
      :direction="direction"
      :before-close="handleClose"
      size="1200px"
    >
      <div class="indent_frame">
        <el-table :data="orderList" border stripe>
          <!-- 第一列  索引列-->
          <el-table-column type="index" />
          <!-- 第二列 -->
          <el-table-column prop="ordernum" label="订单号" />
          <!-- 第s三列 -->
          <el-table-column prop="driverName" label="司机姓名" />
          <!-- 第四列 -->
          <el-table-column prop="province" label="省" />
          <!-- 第五列 -->
          <el-table-column prop="city" label="市" />
          <!-- 第六列 -->
          <el-table-column prop="origin" label="出发地" />
          <!-- 第七列 -->
          <el-table-column prop="bourn" label="目的地" />
          <!-- 第八列 -->
          <el-table-column prop="price" label="订单费用" />
          <!-- 第九列 -->
          <el-table-column prop="starttime" label="出发时间" />
          <!-- 第十列 -->
          <el-table-column prop="endtime" label="结束时间" />
          <!-- 第十一列 -->
          <el-table-column prop="ordertime" label="订单创建时间" />
        </el-table>
        <div class="removes">
          <el-pagination
            :current-page="orderPagenum"
            :page-sizes="[3, 6, 9]"
            :page-size="orderPagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="orderTotal"
            @size-change="orderSizeChange"
            @current-change="orderCurrentChange"
          />
        </div>
      </div>
    </el-drawer>
    <!-- 消费记录抽屉 -->
    <el-drawer
      title="投诉记录"
      :visible.sync="complaintDrawer"
      :direction="direction"
      :before-close="handleClose"
      size="1200px"
    >
      <div class="indent_frame">
        <el-table :data="complaintList" border stripe>
          <!-- 第一列  索引列-->
          <el-table-column type="index" />
          <!-- 第三列 -->
          <el-table-column prop="driverName" label="被投诉司机" />
          <!-- 第四列 -->
          <el-table-column prop="type" label="投诉类型" />
          <!-- 第五列 -->
          <el-table-column prop="content" label="投诉内容" />
          <!-- 第六列 -->
          <el-table-column prop="time" label="投诉时间" />
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getPassenger } from '@/api/passenger'
import { fileUpload } from '@/api/passenger'
import { geteditUser } from '@/api/passenger'
import { getDeleteUser } from '@/api/passenger'
import { getLockUser } from '@/api/passenger'
import { getuserRecord } from '@/api/passenger'
import { getComplaint } from '@/api/passenger'
import { getRemoves } from '@/api/passenger'
import { searchPs } from '@/api/passenger'

export default {
  name: 'User',
  data() {
    return {
      headdImg: '', // 头像
      passengerList: [], // 乘客列表
      editList: [], // 乘客编辑列表
      orderList: [], // 用户消费信息列表
      complaintList: [], // 投诉记录列表
      multipleSelection: [], // 多选列表
      searchPassenger: '', // 搜索框信息
      querInfo: {
        // 当前页码
        pagenum: 1,
        // 每页显示条数
        pagesize: 3
      },
      // 乘客总数
      total: 0,
      labelPosition: 'left', // 表单域标签的位置
      direction: 'rtl', // 抽屉打开方向
      editDrawer: false, // 编辑抽屉打开状态
      indentDrawer: false, // 消费记录抽屉打开状态
      complaintDrawer: false, // 投诉记录抽屉打开状态
      // 订单当前页码
      orderPagenum: 1,
      // 订单每页显示条数
      orderPagesize: 3,
      // 订单总数
      orderTotal: 0,
      // 订单页用户ID
      userOrderId: ''
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    // 获取用户信息列表
    async getUserList() {
      const result = await getPassenger(this.querInfo)
      console.log(result, 159)
      if (result.code !== 200) return this.$message.error('获取用户列表失败')
      this.passengerList = result.data
      this.total = result.total
      console.log(this.passengerList)
    },
    // 选择显示的数量
    handleSizeChange(newSize) {
      this.querInfo.pagesize = newSize
      this.getUserList()
    },
    // 显示第几页的数据
    handleCurrentChange(num) {
      this.querInfo.pagenum = num
      this.getUserList()
    },
    // 消费记录选择显示的数量
    orderSizeChange(newSize) {
      this.orderPagesize = newSize
      this.userOrder()
    },
    // 订单显示第几页的数据
    orderCurrentChange(num) {
      this.orderPagenum = num
      this.userOrder()
    },
    // 点击遮罩区关闭抽屉
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 打开编辑抽屉
    showuser(item) {
      console.log(item)
      this.editList = Object.assign({}, item) // 深拷贝
      this.headdImg = item.headPortrait
      this.editDrawer = true
    },
    // 头像上传
    async uploadCardImg(file) {
      var formData = new FormData()
      formData.append('file', file.file)
      const result = await fileUpload(formData)
      console.log(result.data)
      this.headdImg = result.data
    },
    // 图片的上传要求
    imgUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt10M) {
        this.$message.error('上传图片大小不能超过 10MB!')
      }
      return isJPG && isJPG && isLt10M
    },
    // 提交编辑
    SubmitEdit() {
      console.log(this.editList)
      // 乘客电话号
      const phoneNum = this.editList.phoneNum
      // 密码
      const userPwd = this.editList.userPwd
      // 邮箱
      const userMailbox = this.editList.userMailbox
      // 昵称
      const wxName = this.editList.wxName
      // 头像
      const headdImg = this.headdImg
      this.$confirm('此操作将编辑用户信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const res = geteditUser({ phoneNum, userPwd, userMailbox, wxName, headdImg })
        console.log(res.data, 226)
        this.getUserList()
        this.$message({
          type: 'success',
          message: '编辑成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消编辑'
        })
      })
    },
    // 删除用户
    removeuser(Id) {
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getDeleteUser(Id).then(result => {
          if (result.code === 200) {
            this.$message({ type: 'success', message: '删除成功!' })
            this.getUserList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 解锁锁定用户
    async lockUser(Id, state) {
      const userId = Id
      const lockState = state
      const res = await getLockUser({ userId, lockState })
      if (res.code === 200) {
        this.getUserList()
      }
    },
    // 用户消费记录
    orderForm(id) {
      console.log(id, 422)
      this.userOrderId = id
      this.userOrder()
      this.indentDrawer = true
    },
    async userOrder() {
      // 当前用户ID
      const id = this.userOrderId
      // 当前页码
      const pagenum = this.orderPagenum
      // 每页显示条数
      const pagesize = this.orderPagesize
      const res = await getuserRecord({ pagenum, pagesize, id })
      console.log(res.data)
      this.orderList = res.data
      this.orderTotal = res.total
    },
    // 投诉记录
    async complaint(id) {
      console.log(id, 273)
      const res = await getComplaint({ id })
      console.log(res.data)
      this.complaintList = res.data
      this.complaintDrawer = true
    },
    // 复选框选择的内容
    handleSelectionChange(val) {
      this.multipleSelection = []
      val.forEach((item, index) => {
        this.multipleSelection.push(item.userId)
      })
      console.log(this.multipleSelection)
    },
    // 批量删除
    async removes() {
      console.log(this.multipleSelection)
      const res = await getRemoves(this.multipleSelection)
      console.log(res)
      this.$message({ message: '批量删除成功', type: 'success' })
      this.getUserList()
    },
    // 用户搜索
    async searchP() {
      var querInfo = Object.assign({}, this.querInfo)
      querInfo['search'] = this.searchPassenger
      console.log(querInfo)
      const result = await searchPs(querInfo)
      console.log(result, 346)
      if (result.code !== 200) return this.$message.error('获取角色列表失败')
      this.passengerList = result.data
      this.total = result.total
      console.log(this.passengerList)
    },
    // 返回首页
    homePage() {
      this.getUserList()
    }
  }
}
</script>

<style lang="scss">
.register_frame {
  width: 90%;
  height: 800px;
  border: 1px solid orange;
  margin: 0 auto;
  margin-top: 30px;
  padding-top: 20px;
  padding-right: 20%;
  padding-left: 15%;
  padding-bottom: 30px;
  border-radius: 20px;
  background-color: white;
  overflow:auto;
}
// 上传头像
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px solid rgb(220, 223, 230);
  border-radius: 10px;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
// 订单抽屉
.indent_frame{
  width: 90%;
  height: 700px;
  margin: 0 auto;
  overflow:auto;
}
// 批量删除
.removes{
  width: 100%;
  margin-top: 10px;
  display: flex;
  Justify-content: space-between;
}
// 搜索栏
.search{
  width: 100%;
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  Justify-content: flex-end;
  padding-right: 25px;
  .searchReturn{
    margin-left:30px
  }
  .search2{
    margin-right:10px
  }
}
</style>
